import React, {Component} from 'react';

import './news.css';

class News extends Component {

    constructor(props) {
        super(props);
        this.state = {
            title: 'hi react!',
        }
    }


    clickHandler = () => {
        console.log(this);
        this.setState({
            title: '我是新的标题！',
        })
    }

    UNSAFE_componentWillMount() {
        console.log('componentWillMount');
    }

    componentDidMount() {
        console.log('componentDidMount 网络请求');
    }

    render() {
        console.log(this.props);

        return (
            <div style="{{color: '#cd21ff'}}">
                <h1>news组件-{this.state.title}</h1>
                <h2>{this.props.number}-{this.props.children}</h2>

                <button onClick={this.clickHandler}>点击</button>
                <p>
                    1. 结构 jsx元素
                    2. 样式 行内 外部样式表
                    3. 行为 事件 注意this指向问题
                    4. 数据 state props
                    5. 生命周期函数
                </p>
            </div>
        );
    }
}

export default News;
